<template>
  <el-dialog
    :title="formData.id ? '修改权限':'添加权限'"
    :visible.sync="showDialog"
    width="45%"
    @close="close"
  >
    <!-- 绘制表单 -->
    <el-form ref="form" :model="formData" :rules="formRules" label-width="140px" size="small">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formData.description" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="formData.enVisible" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
    <!-- 确认取消按钮 -->
    <span slot="footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermissionList, editPermissionApi, getPermissionInfoApi } from '@/api/permission'
export default {
  name: 'AddPermForm',
  data() {
    return {
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 默认关闭
      },
      formRules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  methods: {
    // 提交事件
    async btnOk() {
      // 表单效验
      await this.$refs.form.validate()
      // 加工数据
      // 发送请求
      this.formData.id ? await editPermissionApi(this.formData) : await addPermissionList(this.formData)
      // 提示消息
      this.$message.success('操作成功')
      // 关闭
      this.showDialog = false
      // 更新
      this.$emit('updateList')
    },
    // 回显方法
    async reviewData(id) {
      const res = await getPermissionInfoApi(id)
      this.formData = res
      this.showDialog = true
    },
    close() {
      this.$refs.form.clearValidate()
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 默认关闭
      }
    }
  }

}
</script>

<style>

</style>
